<template>
  <div class="right-container">
    <div class="table-header other-header">
      <div class="header-title">{{ props?.PageDataHooks.dataInfo.pageTitle }}</div>
      <div class="table-action">
        <a-form :model="props?.PageDataHooks.dataInfo.labelModel"
                v-show="checkPermission(getPermCode(PageDataHooks.dataInfo.pageType, `${PageDataHooks.dataInfo.currentLabelCode}.searchForm`))"
        >
          <a-form-item :field="props?.PageDataHooks.dataInfo.field" label-col-flex="0px">
            <a-input-search
              v-model="
                props.PageDataHooks.dataInfo.labelModel[
                  props.PageDataHooks.dataInfo.field
                ]
              "
              :placeholder="props?.PageDataHooks.dataInfo.searchPlaceholder"
              :style="{ width: '272px', height: '32px' }"
              allow-clear
            ></a-input-search>
          </a-form-item>
          <a-button
            type="primary"
            :style="{ height: '32px' }"
            @click="props.PageDataHooks.handleChildSearch"
            >查 询</a-button
          >
        </a-form>
        <a-button
          type="primary"
          :style="{ height: '32px' }"
          @click.stop="props.PageDataHooks.handleChildAdd"
          v-show="checkPermission(getPermCode(PageDataHooks.dataInfo.pageType, `${PageDataHooks.dataInfo.currentLabelCode}.addBtn`))"
        >
          <template #icon>
            <icon-plus />
          </template>
          <template #default>新建</template>
        </a-button>
      </div>
    </div>
    <Table
      v-show="checkPermission(getPermCode(PageDataHooks.dataInfo.pageType, `${PageDataHooks.dataInfo.currentLabelCode}.list`))"
      class="other-table"
      :columns="props?.PageDataHooks.dataInfo.columns"
      :data="props?.PageDataHooks.dataInfo.data"
      :total="props?.PageDataHooks.dataInfo.total"
      :current="props?.PageDataHooks.dataInfo.labelModel.page"
      :pageSize="props?.PageDataHooks.dataInfo.labelModel.pageSize"
      :stickyHeader="props?.PageDataHooks.dataInfo.stickyHeader"
      :showPageSize="props?.PageDataHooks.dataInfo.showPageSize"
      :scroll="props?.PageDataHooks.dataInfo.scroll"
      :scrollbar="props?.PageDataHooks.dataInfo.scrollbar"
      :loading="props.PageDataHooks.dataInfo.loading"
      @handleSizeChange="props.PageDataHooks.handleChildSizeChange"
      @handleCurrentSizeChange="props.PageDataHooks.handleChildCurrentSizeChange"
    >
      <template #id="{ record, rowIndex }">
        <span>{{ rowIndex + 1 }}</span>
      </template>
      <template #action="{ record }">
        <div>
          <a-button
            v-show="checkPermission(getPermCode(PageDataHooks.dataInfo.pageType, `${PageDataHooks.dataInfo.currentLabelCode}.editBtn`))"
            type="text"
            class="action-btn"
            @click.stop="() => props.PageDataHooks.handleChildUpdate(record)"
            >编辑</a-button
          >
        </div>
      </template>
    </Table>
  </div>
</template>
<script lang="ts" setup name="LabelRight">
import Table from "@/components/table/index.vue";
import { getPermCode } from "@/views/configCenter/utils/useBaseData";
import { checkPermission } from "@/directive/role";
interface Prop {
  PageDataHooks: MarkPage.PageDataHooks;
}
const props = defineProps<Prop>();
</script>
<style lang="less" scoped>
@import url("../styles/markPage.less");
</style>
